<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>写评论</title>
  <style>
  .ct-star {
        display: inline-block;
        margin: 0 1px;
        width: 20px;
        height: 20px;
        /*background-color: #fe5400;*/
        background: url('/static/index/image/x2.png') no-repeat;
        vertical-align: -2px;
        cursor: pointer;
    }
 .ic-star-off {
        background-position: -39px 0;
    }
</style>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<link href="/static/admin/css/toastr.min.css" rel="stylesheet"/>
  <meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">
    <link href="/static/mobile/css/origin.css" rel="stylesheet">
    <link href="/static/mobile/css/normalize.css" rel="stylesheet">
    <link href="/static/mobile/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
  <div class="article col-xs-12">
    <div id="review-editor-root" class="review-editor" style="display: block;">
      <div class="row">
            <div class="col-xs-4" style="margin-top: 20px;">
                      <img src="/uploads/{$data.cover}" class="img-responsive" alt="Responsive image">
            </div>
            <div class="col-xs-8">
                      <div class="review-editor-subject-card-title col-xs-12">
                        <h3>{$data.mname}</h3>
                      </div>
                      <div class="review-editor-subject-card-summary">
                        <h3><small>导演 {$data.director} / {$data.country} / 评分:{$data.score}</small></h3>
                      </div>
                  </div>

                            <input type="hidden" name="mid" id="id" value="{$data.id}">
                            <input type="hidden" name="uid" value="{$Think.session.id}">

                                 <div class="control-group">
                                     <!-- Select Basic -->
                                     <div class="review-editor-field-rating-label">
                                         <h5>给个评价吧:</h5>
                                     </div>
                                     <span class="star">
        <b class="ct-star ic-star-off" sign="1"><svg width="20" height="20"><polygon stroke="#fe5400" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-rule="evenodd" points="9.00000023 13.252274 4.05572809 16.2562855 5.46226769 10.6880553 1 6.82738251 6.80466211 6.82738254 9 1 11.3407359 6.82738254 17 6.82738251 12.1897095 10.6880553 13.9442719 16.2562855"></polygon></svg></b>
        <b class="ct-star  ic-star-off" sign="2"><svg width="20" height="20"><polygon stroke="#fe5400" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-rule="evenodd" points="9.00000023 13.252274 4.05572809 16.2562855 5.46226769 10.6880553 1 6.82738251 6.80466211 6.82738254 9 1 11.3407359 6.82738254 17 6.82738251 12.1897095 10.6880553 13.9442719 16.2562855"></polygon></svg></b>
        <b class="ct-star  ic-star-off" sign="3"><svg width="20" height="20"><polygon stroke="#fe5400" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-rule="evenodd" points="9.00000023 13.252274 4.05572809 16.2562855 5.46226769 10.6880553 1 6.82738251 6.80466211 6.82738254 9 1 11.3407359 6.82738254 17 6.82738251 12.1897095 10.6880553 13.9442719 16.2562855"></polygon></svg></b>
        <b class="ct-star  ic-star-off" sign="4"><svg width="20" height="20"><polygon stroke="#fe5400" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-rule="evenodd" points="9.00000023 13.252274 4.05572809 16.2562855 5.46226769 10.6880553 1 6.82738251 6.80466211 6.82738254 9 1 11.3407359 6.82738254 17 6.82738251 12.1897095 10.6880553 13.9442719 16.2562855"></polygon></svg></b>
        <b class="ct-star  ic-star-off" sign="5"><svg width="20" height="20"><polygon stroke="#fe5400" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-rule="evenodd" points="9.00000023 13.252274 4.05572809 16.2562855 5.46226769 10.6880553 1 6.82738251 6.80466211 6.82738254 9 1 11.3407359 6.82738254 17 6.82738251 12.1897095 10.6880553 13.9442719 16.2562855"></polygon></svg></b>
</span>
<span class="star-txt "></span>
<input type="hidden" id="score" name="score" value="">

                                 </div>

                              <div class="col-xs-12 form-group has-success">
                                <input class="form-control" id="title" type="text" placeholder="添加标题" style="margin-top: 20px;" name="title"  maxlength="30">
                              </div>
                              <div class="form-group has-success col-xs-12" style="margin-top: 10px;">
                                <label>写评论</label>
                                <textarea class="form-control" rows="10" name="comment" id="comment" maxlength="140"></textarea>
                              </div>
                              <div class="col-xs-1" >
                              <button type="submit" class="btn btn-success sub-btn">提交</button>
                              </div>
          <a href="{:url('mobile/Index/show', ['id'=>$data['id']])}" class="btn btn-success " style="margin-left:275px;">取消</a>

      </div>
<script src="/static/admin/js/toastr.min.js" rel="stylesheet"/></script>
      
<script type="text/javascript">
  window.onload=function(){
      // console.log(6666);
        var aSpan=document.getElementsByClassName("star")[0];
        var aStxt=document.getElementsByClassName("star-txt")[0];
        var aBstar=aSpan.getElementsByTagName("b");
        var arrBtxt=["很差","较差","还行","推荐","力荐"];
        var num=0;

        var onOff=true;for(var i= 0;i<aBstar.length;i++){
                aBstar[i].index=i;
              //鼠标移入
                aBstar[i].onmouseover=function(){
                    if(onOff) {
                        num = this.index;
                        aStxt.innerHTML = arrBtxt[num];
                        for (var i = 0; i <=this.index; i++) {
                            aBstar[i].style.backgroundPosition = "0 0";
                        }
                    }
                };

              //鼠标移开
                aBstar[i].onmouseout=function(){
                  // console.log(onOff);
                 if(onOff){
                     aStxt.innerHTML="";
                     for(var i=0;i<=this.index;i++){
                         aBstar[i].style.backgroundPosition="-39px 0";
                     }
                   }
                 };

                //鼠标点击
                aBstar[i].onclick=function(){
                    // console.log($(this).attr('sign')); 
                    $('#score').attr( "value" ,$(this).attr('sign'));
                    onOff=false;//开关为假就不执行鼠标移除的代码
                    //先清空
                    aStxt.innerHTML="";
                    for(var i=0;i<aBstar.length;i++){
                        aBstar[i].style.backgroundPosition="-39px 0";
                    }
                    //点击当前星星，之前的都点亮包含自己
                    num = this.index ;
                    aStxt.innerHTML=arrBtxt[num];
                    for(var i=0;i<=this.index;i++){
                        aBstar[i].style.backgroundPosition="0 0";
                    }

                };
            }
    }
  $(function(){
    $('.sub-btn').click(function () {
      // console.log(1234)
      postdata();
    });

     function postdata(){   
         //提交数据函数   
        toastr.options = {  
            closeButton: true,  
            debug: false,  
            progressBar: true,  
            positionClass: "toast-top-right",  
            onclick: null,  
            showDuration: "1000",  
            hideDuration: "1000",  
            timeOut: "1000",  
            extendedTimeOut: "1000",  
            showEasing: "swing",  
            hideEasing: "linear",  
            showMethod: "fadeIn",  
            hideMethod: "fadeOut"  
        };
        $.ajax({                                                  //调用jquery的ajax方法   
          type: "POST",                                      //设置ajax方法提交数据的形式   
          url: '/mobile/Comment/add',                                        
          data: {
                  mid : $("#id").val(),
                  score : $("#score").val(),
                  title : $("#title").val(),
                  comment : $("#comment").val()
              }, 
          success: function(data){    
            if (data){
              toastr.success('评论成功,一秒后跳转到电影详情页');
              setInterval(function(){
                location.href='http://47.96.69.12/mobile/index/show/id/'+$("#id").val()+'.html';
              }, 1000);
          }else{
            toastr.error('评论失败，请重试');
          }
        },
        error: function () {
                alert('AJAX操作失败');
            }
        });   
     }   
    })
    </script>
    <script src="/static/mobile/js/bootstrap.min.js"></script>
</body>
</html>